<template>
  <div class="scratch_card">
    <canvas
      id="myCanvas"
      ref="myCanvas"
      :width="width"
      :height="height"
      @mousedown="mouseDown"
      @mousemove="mouseMove"
      @mouseup="mouseUp"
      @mouseleave="mouseLeave"
      @touchstart="touchStart"
      @touchmove="touchMove"
      @touchend="mouseUp"
      @touchLeave="mouseLeave"
    ></canvas>
    <el-button class="reset_btn" @click="reset">重置</el-button>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
let myCanvas = ref() // canvas在dom中的实例
let ctx = ref() // canvas的实例对象
// canvas的宽度
let width = ref(400)
// canvas的高度
let height = ref(250)
// 判断是否可以画线
let isDrawing = ref(false)
// 保存开始画线时，线的起点的X坐标
let startX = ref(0)
// 保存开始画线时，线的起点的Y坐标
let startY = ref(0)
let time: any = ref(null)
onMounted(() => {
  init()
})
function reset() {
  console.log('reset')
  init()
}
function init() {
  ctx.value = myCanvas.value.getContext('2d')
  ctx.value.globalCompositeOperation = 'source-over'
  // 先在myCanvas.value上画一个灰色的矩形
  ctx.value.fillStyle = '#ddd'
  ctx.value.fillRect(0, 0, width.value, height.value)

  // 设置画的线的宽度
  ctx.value.lineWidth = 20
  // 设置线交汇时，是圆角的
  ctx.value.lineJoin = 'round'
}

/* 如果需要移动端也可以生效，
		需要绑定touchstart、touchmove、touchend 事件，并且获取触摸点的坐标
		*/
//myCanvas.value.addEventListener('touchstart', mouseDown, false);
//myCanvas.value.addEventListener('touchmove', mouseMove, false);
//myCanvas.value.addEventListener('touchend', mouseUp, false);
function mouseLeave() {
  time.value = setTimeout(() => {
    isDrawing.value = false
  }, 500)
}
// 按下鼠标按钮时，调用mouseDown
function mouseDown(e: any) {
  if (isDrawing.value) return
  isDrawing.value = true
  // 保存鼠标点击时 X坐标为，画线时，线的起点的X坐标
  startX.value = e.layerX
  // 保存鼠标点击时 Y坐标为，画线时，线的起点的Y坐标
  startY.value = e.layerY
}
// 鼠标移动时，调用mouseDown
function mouseMove(e: any) {
  if (isDrawing.value) {
    if (time.value) {
      clearTimeout(time.value)
    }

    // 获取鼠标相对于 myCanvas.value 的坐标
    let x = e.layerX
    let y = e.layerY

    ctx.value.globalCompositeOperation = 'destination-out'

    // 开始画线
    ctx.value.beginPath()

    // 起点坐标为 startX.value 和 startY.value
    ctx.value.moveTo(startX.value, startY.value)
    // 结束的坐标为这次移动时的坐标
    ctx.value.lineTo(x, y)
    ctx.value.closePath()
    ctx.value.stroke()

    // 设置这次移动结束时的坐标，为下次开始画线时的坐标
    startX.value = x
    startY.value = y
  }
}

// 松开鼠标按钮时，调用的事件
function mouseUp(e: any) {
  console.log('mouseUp')
  if (isDrawing.value) {
    // isDrawing 为false时，不可以画线
    isDrawing.value = false
    // 获取图片像素信息
    let data = ctx.value.getImageData(0, 0, width.value, height.value).data
    console.log('图片像素信息', data)
    let length = data.length
    let k = 0

    // 如果一个像素是透明的（值都是0），k就+1
    for (let i = 0; i < length - 3; i += 4) {
      if (
        data[i] == 0 &&
        data[i + 1] == 0 &&
        data[i + 2] == 0 &&
        data[i + 3] == 0
      ) {
        k++
      }
    }
    // 当k > width*height*0.2 时，
    // 也就是说有20%的面积是透明的时，就把整个myCanvas.value的背景显示出来
    if (k > width.value * height.value * 0.7) {
      ctx.value.fillRect(0, 0, width.value, height.value)
    }
  }
}
function touchStart(e: any) {
  if (isDrawing.value) return
  isDrawing.value = true
  // 移动端使用下面的方法 获取 startX.value 和 startY.value
  startX.value = e.touches[0].clientX
  startY.value = e.touches[0].clientY
}
// 手指移动时，调用touchMove
function touchMove(e: any) {
  if (isDrawing.value) {
    if (time.value) {
      clearTimeout(time.value)
    }
    // 获取手指相对于 myCanvas.value 的坐标
    // 移动端使用下面的方法 获取 x 和 y
    let x = e.touches[0].clientX
    let y = e.touches[0].clientY

    ctx.value.globalCompositeOperation = 'destination-out'

    // 开始画线
    ctx.value.beginPath()

    // 起点坐标为 startX.value 和 startY.value
    ctx.value.moveTo(startX.value, startY.value)
    // 结束的坐标为这次移动时的坐标
    ctx.value.lineTo(x, y)
    ctx.value.closePath()
    ctx.value.stroke()

    // 设置这次移动结束时的坐标，为下次开始画线时的坐标
    startX.value = x
    startY.value = y
  }
}
</script>
<style lang="scss" scoped>
.scratch_card {
  position: absolute;
  top: 200px;
  left: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  #myCanvas {
    background: url('https://www.kkkk1000.com/images/globalCompositeOperation/bg3.jpg')
      no-repeat center;
    background-size: 100% 100%;
  }
  .reset_btn {
    margin-top: 10px;
  }
}
</style>
